/**
 * 模拟路由页面，这个页面使用yf-design组件库快速开发
 **/
import { useRef } from 'react'
import { Form, Table, ListPage, Cascader, Checkbox, Select, TreeSelect, Input } from "../../components/index.js";
import { DatePicker, message } from "antd";

const User = () => {
  const formRef = useRef(null)
  const tableRef = useRef(null)
  const form = {
    ref: formRef,
    initValues: 'getInitData', // 支持传入string调指定名称接口，支持函数，支持对象，暂不支持form-table的数组数据
    // initValues: { username: '欢迎来到文和友哥布林博物馆' },
    config: {
      // 提交型表单
      // labelCol: { style: { width: '100px' } },
      // layout: 'horizontal',
      // 查询型表单
      labelCol: { style: { width: '100px' } },
      layout: 'inline',
    },
    list: [
      {
        label: '场景编码',
        name: 'sceneCodes',
        Component: Cascader,
        bind: {
          style: { width: '300px' },
          placeholder: 'placeholder',
          // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
          // options: [{ label: '根哥', value: 'ygy' }],
          options: () => {
            // 函数是为了支持在当前页面挂载前，已经存在的数据，需要处理的时候，处理数据传入
            return [{ label: 'hello', value: 'ygy' }]
          },
          onChange (value) {
            console.log(value)
          }
        }
      },
      {
        label: '性别',
        name: 'sex',
        Component: Checkbox,
        bind: {
          style: { width: '300px' },
          options: 'getOptions',  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
          onChange (value) {
            console.log(value)
          }
        }
      },
      {
        label: '树选择',
        name: 'tree',
        Component: TreeSelect,
        bind: {
          style: { width: '300px' },
          placeholder: 'placeholder',
          // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
          // options: [{ label: '根哥', value: 'ygy' }],
          options: () => {
            return [
              { label: 'hello', value: 'ygy' },
              {
                label: 'hello2',
                value: 'ygy2',
                children: [
                  { label: 'hello3', value: 'ygy3' },
                  { label: 'hello4', value: 'ygy4' },
                  { label: 'hello5', value: 'ygy5' }
                ]
              }
            ]
          },
          onChange (value) {
            console.log(value)
          }
        }
      },
      {
        label: '机制',
        name: 'scene',
        Component: Select,
        bind: {
          style: { width: '300px' },
          placeholder: 'placeholder',
          // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
          // options: [{ label: '根哥', value: 'ygy' }],
          options: () => {
            return [
              { label: 'hello1', value: 'ygy1' },
              { label: 'hello2', value: 'ygy2' },
              { label: 'hello3', value: 'ygy3' }
            ]
          },
          onChange (value) {
            console.log(value)
          }
        }
      },
      {
        label: '用户名',
        name: 'username',
        Component: Input,
        rules: [{ required: true }],
        bind: {
          style: { width: '300px' },
          disabled: (form) => {
            const formData = form.getFieldsValue()
            return !!(formData.scene && formData.scene.length > 0)
          },
          allowClear: true,
          placeholder: 'placeholder',
          // onBlur: (e) => {
          //   formRef.current.setFieldValue('username', e.target.value.trim())
          // }
        }
      },
      {
        label: '机制',
        name: 'date',
        Component: DatePicker,
        bind: {
          style: { width: '300px' },
          placeholder: '请选择日期',
          onChange (value) {
            console.log(formRef.current, value);
          }
        }
      },
    ],
    buttons: [
      {
        type: 'primary',
        text: '提交',
        key: 'SUBMIT',
        async onClick () {
          // 手动校验
          await formRef.current.validateFields()
          const formData = formRef.current.getFieldsValue()
          window.$api.submit(formData)
          console.log(formData)
          tableRef.current.setDataSource([
            { name: 'ygy1', age: 18 },
            { name: 'ygy2', age: 19 },
            { name: 'ygy3', age: 20 },
            { name: 'ygy4', age: 21 }
          ])
        }
      },
      {
        text: '重置',
        key: 'RESET',
        onClick () {
          formRef.current.reset()
          const formData = formRef.current.getFieldsValue()
          console.log(formData)
        }
      },
      {
        type: 'primary',
        danger: true,
        text: '我是自定义按钮',
        key: 'custom-key',
        onClick () {
          message.info('自己定义按钮事件，支持获取form的ref，当然如果需要拿table或者其他的，使用其他组件，这是纯form组件')
        }
      }
    ]
  }
  const table = {
    ref: tableRef,
    initValues: 'getTableData',
    config: {},
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      }
    ],
    buttons: [
      {
        type: 'primary',
        text: '新增',
        key: 'ADD',
        onClick () {
          console.log(tableRef)
          console.log(formRef)
        }
      },
    ]
  }

  const listPageRef = useRef(null)
  const listPage = {
    ref: listPageRef,
    formConfig: {
      initValues: 'getInitData', // 支持传入string调指定名称接口，支持函数，支持对象，暂不支持form-table的数组数据
      // initValues: { username: '欢迎来到文和友哥布林博物馆' },
      config: {
        // 提交型表单
        // labelCol: { style: { width: '100px' } },
        // layout: 'horizontal',
        // 查询型表单
        labelCol: { style: { width: '100px' } },
        layout: 'inline',
      },
      list: [
        {
          label: '场景编码',
          name: 'sceneCodes',
          Component: Cascader,
          bind: {
            style: { width: '300px' },
            placeholder: 'placeholder',
            // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
            // options: [{ label: '根哥', value: 'ygy' }],
            options: () => {
              // 函数是为了支持在当前页面挂载前，已经存在的数据，需要处理的时候，处理数据传入
              return [{ label: 'hello', value: 'ygy' }]
            },
            onChange (value) {
              console.log(value)
            }
          }
        },
        {
          label: '性别',
          name: 'sex',
          Component: Checkbox,
          bind: {
            style: { width: '300px' },
            options: 'getOptions',  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
            onChange (value) {
              console.log(value)
            }
          }
        },
        {
          label: '树选择',
          name: 'tree',
          Component: TreeSelect,
          bind: {
            style: { width: '300px' },
            placeholder: 'placeholder',
            // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
            // options: [{ label: '根哥', value: 'ygy' }],
            options: () => {
              return [
                { label: 'hello', value: 'ygy' },
                {
                  label: 'hello2',
                  value: 'ygy2',
                  children: [
                    { label: 'hello3', value: 'ygy3' },
                    { label: 'hello4', value: 'ygy4' },
                    { label: 'hello5', value: 'ygy5' }
                  ]
                }
              ]
            },
            onChange (value) {
              console.log(value)
            }
          }
        },
        {
          label: '机制',
          name: 'scene',
          Component: Select,
          bind: {
            style: { width: '300px' },
            placeholder: 'placeholder',
            // options: 'dict'  // 支持字符串, 数组，函数(仅支持同步，不支持异步函数)，字符串默认接口方法名
            // options: [{ label: '根哥', value: 'ygy' }],
            options: () => {
              return [
                { label: 'hello1', value: 'ygy1' },
                { label: 'hello2', value: 'ygy2' },
                { label: 'hello3', value: 'ygy3' }
              ]
            },
            onChange (value) {
              console.log(value)
            }
          }
        },
        {
          label: '用户名',
          name: 'username',
          Component: Input,
          rules: [{ required: true }],
          bind: {
            style: { width: '300px' },
            disabled: (form) => {
              const formData = form.getFieldsValue()
              return !!(formData.scene && formData.scene.length > 0)
            },
            allowClear: true,
            placeholder: 'placeholder',
            // onBlur: (e) => {
            //   formRef.current.setFieldValue('username', e.target.value.trim())
            // }
          }
        },
        {
          label: '机制',
          name: 'date',
          Component: DatePicker,
          bind: {
            style: { width: '300px' },
            placeholder: '请选择日期',
            onChange (value) {
              console.log(value);
            }
          }
        },
      ],
      buttons: [
        {
          type: 'primary',
          text: '提交',
          key: 'SUBMIT',
          async onClick () {
            // 手动校验
            await listPageRef.current.form.validateFields()
            const formData = listPageRef.current.form.getFieldsValue()
            window.$api.submit(formData)
          }
        },
        {
          text: '重置',
          key: 'RESET',
          onClick () {
            listPageRef.current.reset()
            const formData = listPageRef.current.form.getFieldsValue()
            console.log(formData)
          }
        }
      ]
    },
    tableConfig: {
      config: {},
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        }
      ],
      buttons: [
        {
          type: 'primary',
          text: '新增',
          key: 'ADD',
          onClick () {
            console.log(listPageRef)
            console.log(listPageRef.current.table)
          }
        },
      ]
    }
  }

  return (
    <>
      <Form { ...form }  />
      <Table { ...table } />
      <ListPage { ...listPage } />
    </>
  )
}

export default User
